import React, { FC, useRef, useState, useEffect } from 'react';
import { Modal, List, Icon, Button, TextareaItem } from 'antd-mobile-v2';
import styles from './index.module.less';
interface ModalProps {
  modalVisible: boolean; //控制显示
  btnWord: string; //按钮文字
  opreationTitle: string; //操作的标题
  topTitle: string; //顶部标题
  doClose: Function; //关闭
  doSubmit: Function; //提交
  placeholder: string;
}

let timer = null;

const ConfirmAndRefuseModal: FC<ModalProps> = (props) => {
  const { modalVisible, btnWord, opreationTitle, topTitle, doClose, doSubmit, placeholder } = props;
  const TextareaRef: any = useRef();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!modalVisible) {
      clearTimeout(timer);
      setLoading(false);
    }
  }, [modalVisible]);

  const modalClose = () => {
    doClose(false);
  };

  const modalSubmit = () => {
    if (loading) return;
    setLoading(true);
    const textareaWord = TextareaRef.current.state.value;
    doSubmit(false, textareaWord);
    clearTimeout(timer);
    timer = setTimeout(() => {
      setLoading(false);
    }, 30000);
  };

  return (
    <Modal
      // popup
      visible={modalVisible}
      animationType="slide-up"
      className={styles.modalWarp}
    >
      {/* 头部 */}
      <div className={styles.modalTitle}>
        {topTitle}
        <i className={'iconfont' + ' ' + 'iconclose'} onClick={() => modalClose()} />
      </div>
      <div className={styles.wrapBox}>
        <div className={styles.title}>
          <span>{opreationTitle}</span>
        </div>
        <TextareaItem
          placeholder={placeholder}
          rows={5}
          ref={TextareaRef}
          count={500}
        />
        <div className={styles.footerBtn}>
          <Button loading={loading} onClick={() => modalSubmit()}>{btnWord}</Button>
        </div>
      </div>

    </Modal>
  );
};

export default ConfirmAndRefuseModal;